<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Vue示例</title>

</head>

<body>
<div id="app" v-cloak>
    <template v-if="type==='name'">
        <label>用户名：</label>
        <input key="name-input" placeholder="输入用户名">
    </template>
    <template v-else>
        <label>邮箱：</label>
        <input key="mail-input" placeholder="输入邮箱">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
</div>
<script charset="utf-8" src="../js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            type: 'name'
        },
        methods: {
            handleToggleClick: function () {
                this.type = this.type === 'name' ? 'mail' : 'name';
            }
        }
    })
</script>
</body>

</html>
